@import "_variables";

//
// @name: flex
// @access: public
// @param[$direction]: row or column
//
@mixin flex($direction: row, $flex: flex) {
  display: $flex;
  flex-direction: $direction;
}

@mixin flex-item {
  flex-shrink: 0;
}

@mixin sub-item($size: 1, $direction: row) {
  flex-grow: $size;

  @if $direction=='row' {
    width: 1%
  }

  @else {
    width: 100%;
    height: 1%;
  }
}

@mixin a-center {
  align-items: center;
}

@mixin j-center {
  justify-content: center;
}

@mixin j-between {
  justify-content: space-between;
}

@mixin center {
  align-items: center;
  justify-content: center;
  align-content: center;
}

@mixin a-end {
  align-items: flex-end;
}

@mixin j-end {
  justify-content: flex-end;
}

@mixin flex-container($direction: row) {
  @include flex($direction);

  &>.flex-item {
    @include flex-item;
  }

  &>.sub-item {
    @include sub-item($direction: $direction);

    &2 {
      @include sub-item($size: 2, $direction: $direction);
    }

    &3 {
      @include sub-item($size: 3, $direction: $direction);
    }

    &4 {
      @include sub-item($size: 4, $direction: $direction);
    }
  }
}

//
// @name: textEllipsis
// @access: public
//
@mixin text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

//
// @name: textEllipsisLine
// @access: public
//
@mixin text-ellipsis-line($line: 2) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
}

//
// @name: scrollbar
// @access: public
// @param[$size]: number
// @param[$color]: color value
//
@mixin scrollbar($size: $scrollBarSize, $color: $color-scrollBar) {
  overflow: auto;
  -webkit-overflow-scrolling: touch;

  &::-webkit-scrollbar {
    width: $size+px;
    height: $size+px;
    background-color: transparent;
  }

  &:hover {
    &::-webkit-scrollbar {
      width: $size+px;
      height: $size+px;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 4px;
      background-color: $color;
    }
  }
}

//
// @name: transition
// @access: public
// @param[$time]: time value
//
@mixin transition($time: 0.25s) {
  transition: all $time cubic-bezier(0.42, 0, 0.58, 1);
}

//
// @name: mask
// @access: public
// @param[$opacity]: 0-1
// @param[$zIndex]: number
//
@mixin mask($opacity: 0.5, $zIndex: 999) {
  // opacity: $opacity;
  background: rgba(0, 0, 0, $opacity);

  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  z-index: $zIndex;
  display: none;
}

@mixin no-wrap() {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

@mixin extend-click() {
  position: relative;
  &:before{
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
  }
}

@mixin shadow() {
  box-shadow:0px 0px 16rpx 0px #ededed;
}


@mixin bx-button-circle($width: 200rpx) {
  min-width: 200rpx;
  width: $width;
  line-height: 60rpx;
  margin: 40rpx auto;
  border: 2rpx solid $color-theme;
  border-radius: 36rpx;
  font-size: 28rpx;
  color: $color-theme;
}
@mixin empty-button-circle($width: 180rpx) {
  width: $width;
  height: 60rpx;
  line-height: 60rpx;
  border-radius: 2px;
  border: 1px solid #000;
  color: #000;
  margin-top: 45rpx;
  text-align: center;
  font-size: 28rpx;
}

@mixin bx-button-solid($width: 100%,$height: 60rpx, $color: $color-theme) {
  min-width: 200rpx;
  width: $width;
  line-height: $height;
  text-align: center;
  margin: 40rpx auto;
  border: 2rpx solid $color;
  border-radius: 36rpx;
  font-size: 28rpx;
  background-color: $color;
  color: white;
}

@mixin s-line() {
  position: relative;
  height: 78rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .lCont, .rCont {
    display: flex;
    font-size: $font-size-small;
    align-items: center;
    .input {
      color: $color-input;
      font-weight: normal;
      padding: 0 10px;
    }
    .text {
      padding: 0 10px;
    }
  }
  image {
    width: 32rpx;
    height: 32rpx;
  }
  &:nth-last-child(1) {
    border: none;
  }
}